<template>
  <el-dialog
    v-model="visible"
    :title="props.id ? '修改Google申请开户' : 'Google申请开户'"
    width="60%"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <div>
      <div>
        <ApplyStepView />
      </div>
      <div class="form-content">
        <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          label-width="120px"
          class="application-form"
        >
          <!-- 账户信息 -->
          <div class="form-section">
            <el-form-item
              label="公司名称"
              prop="enterpriseName"
              class="form-item"
            >
              <el-input
                v-model="formData.enterpriseName"
                placeholder="请输入公司名称"
                clearable
              />
            </el-form-item>
            <el-form-item label="谷歌邮箱" prop="email" class="form-item">
              <el-input
                v-model="formData.email"
                placeholder="请输入谷歌邮箱"
                clearable
              />
            </el-form-item>

            <el-form-item label="时区" prop="accountTimeZone" class="form-item">
              <el-input
                v-model="formData.accountTimeZone"
                placeholder="请输入时区"
                clearable
              />
              <!-- <el-select
                v-model="formData.accountTimeZone"
                placeholder="请选择时区"
                style="width: 100%"
              >
                <el-option label="Asia/Shanghai/UTC+8" value="Asia/Shanghai" />
                <el-option label="Asia/Tokyo/UTC+9" value="Asia/Tokyo" />
                <el-option label="Asia/Seoul/UTC+9" value="Asia/Seoul" />
                <el-option label="Asia/Manila/UTC+8" value="Asia/Manila" />
                <el-option label="Asia/Bangkok/UTC+7" value="Asia/Bangkok" />
                <el-option label="Asia/Jakarta/UTC+7" value="Asia/Jakarta" />
                <el-option
                  label="Asia/Singapore/UTC+8"
                  value="Asia/Singapore"
                />
                <el-option
                  label="Asia/Kuala_Lumpur/UTC+8"
                  value="Asia/Kuala_Lumpur"
                />
                <el-option
                  label="Asia/Hong_Kong/UTC+8"
                  value="Asia/Hong_Kong"
                />
                <el-option label="Asia/Taipei/UTC+8" value="Asia/Taipei" />
              </el-select> -->
            </el-form-item>

            <el-form-item
              label="官方网址"
              prop="promotionLink"
              class="form-item"
            >
              <el-input
                v-model="formData.promotionLink"
                placeholder="请输入官方网址"
                clearable
              />
              <div class="form-tip">
                请确认推广链接是可打开而且是可正常跳转的状态。链接示例:https://www.hsou.cn
              </div>
            </el-form-item>

            <!-- <el-form-item
              label="结算货币"
              prop="currencyType"
              class="form-item"
            >
              <el-radio-group v-model="formData.currencyType">
                <el-radio
                  v-for="dict in bus_currency_type"
                  :key="dict.value"
                  :value="dict.value"
                  >{{ dict.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item> -->
            <el-form-item
              label="预存金额"
              prop="prestorePrice"
              class="form-item"
            >
              <el-input-number
                v-model="formData.prestorePrice"
                placeholder="请输入预存金额"
              />
              <!-- <el-input
                v-model="formData.prestorePrice"
                placeholder="请输入预存金额"
                clearable
              >
                <template #append>
                  {{ selectDictLabels(bus_currency_type, getCoinType()) }}
                </template>
              </el-input> -->
            </el-form-item>
            <el-form-item label="联系人" prop="contactName" class="form-item">
              <el-input
                v-model="formData.contactName"
                placeholder="请输入联系人"
                clearable
              />
            </el-form-item>
            <el-form-item label="电话" prop="contactPeople" class="form-item">
              <el-input
                v-model="formData.contactPeople"
                placeholder="请输入电话"
                maxlength="11"
                clearable
              />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <template #footer>
      <el-button size="large" @click="handleCancel"> 取消 </el-button>
      <el-button type="primary" size="large" @click="handleSubmit">
        {{ formData.id ? "修改" : "提交开始申请" }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import ApplyStepView from "../apply-step.vue";
import { computed, reactive, ref, watch } from "vue";
import { getCoinType } from "@/utils//auth.js";

import { ElMessage } from "element-plus";
import { handleApply } from "@/utils/accountApply";
const { proxy } = getCurrentInstance();
const { bus_currency_type } = proxy.useDict("bus_currency_type");
import { applyPlatform } from "@/const/index.ts";
import { getApplyAccountDetail, editApplyAccount } from "@/api/apply/index.js";

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    default: null,
  },
});

const emits = defineEmits(["update:value", "on-success"]);

const visible = computed({
  get() {
    return props.value;
  },
  set(val) {
    emits("update:value", val);
  },
});
// 表单引用
const formRef = ref();
const detailInfo = ref({});

// 表单数据
const formData = reactive({
  systemType: applyPlatform.GOOGLE,
  email: "",
  promotionLink: "",
  currencyType: "",
  accountTimeZone: "",
  accountName: "",
  prestorePrice: "",
  enterpriseName: "",
  businessLicense: "",
  companyAddress: "",
  contactName: "",
  contactPeople: "",
});

// 表单验证规则
const formRules = {
  enterpriseName: [
    { required: true, message: "请输入公司名称", trigger: "blur" },
  ],
  email: [
    { required: true, message: "请输入谷歌邮箱", trigger: "blur" },
    {
      type: "email",
      message: "请输入正确的邮箱格式",
      trigger: "blur",
    },
  ],
  // accountTimeZone: [
  //   { required: true, message: "请选择时区", trigger: "change" },
  // ],
  promotionLink: [
    { required: true, message: "请输入网站域名", trigger: "blur" },
    {
      pattern: /^https?:\/\/.+/,
      message: "请输入正确的网址格式",
      trigger: "blur",
    },
  ],
  currencyType: [
    { required: true, message: "请选择结算货币", trigger: "change" },
  ],
  accountName: [{ required: true, message: "请输入账户名称", trigger: "blur" }],
  prestorePrice: [
    { required: true, message: "请输入预存金额", trigger: "blur" },
    {
      pattern: /^\d+(\.\d{1,2})?$/,
      message: "请输入正确的金额格式",
      trigger: "blur",
    },
  ],

  contactName: [{ required: true, message: "请输入联系人", trigger: "blur" }],
  contactPeople: [
    { required: true, message: "请输入联系联系电话", trigger: "blur" },
  ],
};

// 取消操作
function handleCancel() {
  visible.value = false;
  // 重置表单数据
  Object.assign(formData, {
    id: "",
    email: "",
    promotionLink: "",
    currencyType: "",
    accountTimeZone: "",
    accountName: "",
    prestorePrice: "",
    enterpriseName: "",
    businessLicense: "",
    companyAddress: "",
    contactName: "",
    contactPeople: "",
    mediaGoogle: {},
  });
  formRef.value?.resetFields();
}

// 提交表单
async function handleSubmit() {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();
    formData.mediaGoogle = {
      accountTimeZone: formData.accountTimeZone,
      prestorePrice: formData.prestorePrice,
    };
    if (formData.id) {
      formData.mediaGoogle.id = detailInfo.value.mediaGoogle.id;
      formData.mediaGoogle.mediaId = detailInfo.value.mediaGoogle.mediaId;
      await editApplyAccount(formData);
      emits("on-success");
      ElMessage.success("修改成功");
    } else {
      await handleApply(formData);
      ElMessage.success("申请成功");
    }

    visible.value = false;
  } catch (error) {}
}

function getDetail() {
  getApplyAccountDetail(props.id).then(({ data }) => {
    detailInfo.value = data;
    Object.assign(formData, {
      ...data,
      ...data.mediaGoogle,
    });
  });
}
watch(
  () => visible.value,
  (val) => {
    if (val && props.id) {
      getDetail();
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style lang="scss">
.form-item {
  width: 60%;
}

.application-form {
  margin-top: 20px;
  .form-section {
    margin-bottom: 40px;

    .section-title {
      font-size: 14px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 24px;
      padding-bottom: 12px;
    }
  }

  .form-tip {
    font-size: 12px;
    color: #909399;
    margin-top: 4px;
    line-height: 1.4;
  }

  .upload-container {
    .upload-tip {
      font-size: 12px;
      color: #909399;
      margin-top: 8px;
    }
  }

  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 40px;
    padding-top: 24px;
  }
}

// 表单项样式调整
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
  font-size: 14px;
}

:deep(.el-form-item.is-required .el-form-item__label::before) {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
</style>
